<%@ Page
    Language="C#"
    MasterPageFile="~/WePETMaster.master"
    AutoEventWireup="true"
    CodeFile="Resizable.aspx.cs"
    Inherits="ResizableControl_ResizableControl"
    MaintainScrollPositionOnPostback="true"
    Title="ResizableWebPart Sample" 
    Theme="SampleSiteTheme" %>
<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="ajaxToolkit" %>
    <%@ Register
    Assembly="WebPartExtenderToolkit"
    Namespace="WebPartExtenderToolkit"
    TagPrefix="wpet" %>    
<asp:Content ContentPlaceHolderID="SampleContent" Runat="Server">
    <asp:ProxyWebPartManager ID="ProxyWebPartManager1" runat="server">
    </asp:ProxyWebPartManager>
    <ajaxToolkit:ToolkitScriptManager id="ScriptManager" runat="server" />
    <div class="demoarea">
        Resizable image with buttons for automatic resizing. Change the ResizableWebPart target web part in edit mode to apply the behavior to another web part.

        <table><tr valign="top"><td>
      <asp:WebPartZone ID="Left" runat="server" BorderColor="#CCCCCC" Font-Names="Verdana" 
                Padding="6" >
               <EmptyZoneTextStyle Font-Size="0.8em" />
               <PartStyle Font-Size="0.8em" ForeColor="#333333" />
               <TitleBarVerbStyle Font-Size="0.6em" Font-Underline="False" ForeColor="White" />
               <MenuLabelHoverStyle ForeColor="#E2DED6" />
               <MenuPopupStyle BackColor="#5D7B9D" BorderColor="#CCCCCC" BorderWidth="1px" 
                   Font-Names="Verdana" Font-Size="0.6em" />
               <MenuVerbStyle BorderColor="#5D7B9D" BorderStyle="Solid" BorderWidth="1px" 
                   ForeColor="White" />
               <PartTitleStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.8em" 
                   ForeColor="White" />
               <ZoneTemplate>
                <wpet:DummyWebPart
                    ID="sample" 
                    runat="server" 
                    BackColor="White" 
                    ChromeType="TitleAndBorder" 
                    AllowClose="false"
                     />
                                       
                    <wpet:ResizableWebPart  
                    id="ResizableWebPart1"  TargetControlID="sample"
                    HandleCssClass="handleImage"                     
                    ResizableCssClass="resizingImage"      
                    runat="server" 
                    AllowClose="false"
                    MinimumWidth="200"
                    MinimumHeight="100"
                    MaximumWidth="300"
                    MaximumHeight="300"
                    />
                        </ZoneTemplate>
               <MenuVerbHoverStyle BackColor="#F7F6F3" BorderColor="#CCCCCC" 
                   BorderStyle="Solid" BorderWidth="1px" ForeColor="#333333" />
               <PartChromeStyle BackColor="#F7F6F3" BorderColor="#E2DED6" Font-Names="Verdana" 
                   ForeColor="White" />
               <HeaderStyle Font-Size="0.7em" ForeColor="#CCCCCC" HorizontalAlign="Center" />
               <MenuLabelStyle ForeColor="White" />
               </asp:WebPartZone></td><td>
 <asp:WebPartZone ID="Right" runat="server" >
               <ZoneTemplate>
                <wpet:DummyWebPart
                    ID="DummyWebPart1" 
                    runat="server" 
                    BackColor="White" 
                    ChromeType="TitleAndBorder" 
                    AllowClose="false" />

               </ZoneTemplate>
               </asp:WebPartZone>        
               </td>       
               </tr>
               </table>
    </div>
    <div class="demobottom"></div>

    <asp:Panel ID="Description_HeaderPanel" runat="server" style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Description_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg" AlternateText="collapse" />
            ResizableWebPart Description
        </div>
    </asp:Panel>
    <asp:Panel id="Description_ContentPanel" runat="server" style="overflow:hidden;">
        ResizableWebPart is an extender that attaches to any web part on a web part page 
        and allows the user to resize that web part with a handle that attaches to 
        lower-right corner of the web part. The resize handle lets the user resize the 
        element as if it were a window. The appearance of the resize handle can be 
        specified by the page designer with a CSS style. The content within the element 
        can use CSS styles to automatically resize to fit the new dimensions. 
        [TBD]Alternatively, ResizableWebPart exposes two events (onresizing and 
        onresize) that the page designer can attach custom script to in order to enable 
        more complex layout logic [/TBD]. Element dimensions are preserved across 
        postbacks to the server and &quot;size&quot; properties accessible on both the client and 
        server can be used to enable custom resize behaviors. ResizableWebPart can 
        optionally limit the maximum and minimum width and height of the target web part 
        so that resizing can be constrained by the page author (for example, to limit 
        scrolling to only the horizontal dimension).
    </asp:Panel>

    <asp:Panel ID="Properties_HeaderPanel" runat="server" style="cursor: pointer;">
        <div class="heading">
            <asp:ImageButton ID="Properties_ToggleImage" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="expand" />
            ResizableWebPart Properties
        </div>
    </asp:Panel>
    <asp:Panel id="Properties_ContentPanel" runat="server" style="overflow:hidden;" Height="0px">
        <p>
            The controls above are initialized with code like this. The <em>italic</em> properties are optional:
        </p>
<pre>&lt;ajaxWebPart:ResizableWebPart ID=&quot;RCE&quot; runat=&quot;server&quot;
    TargetControlID=&quot;WebpartToResize&quot;
    HandleCssClass=&quot;handleImage&quot;
    <em>ResizableCssClass</em>="resizingImage"
    <em>MinimumWidth</em>="50"
    <em>MinimumHeight</em>="20"
    <em>MaximumWidth</em>="260"
    <em>MaximumHeight</em>=&quot;130&quot;
    [TBD]<em>OnClientResize</em>=&quot;OnClientResizeImage&quot;[/TBD]
    <em>HandleOffsetX</em>="3"
    <em>HandleOffsetY</em>="3" /&gt;</pre>
        <ul>
            <li><strong>TargetControlID</strong> - The ID of the element that becomes resizable</li>
            <li><strong>HandleCssClass</strong> - The name of the CSS class to apply to the resize handle</li>
            <li><strong>ResizableCssClass</strong> - The name of the CSS class to apply to the element when resizing</li>
            <li><strong>MinimumWidth/MinimumHeight</strong> - Minimum dimensions of the resizable element</li>
            <li><strong>MaximumWidth/MaximumHeight</strong> - Maximum dimensions of the resizable element</li>
        </ul>
        <p>
            [TBD]</p>
        <ul>
            <li><strong>OnClientResizeBegin</strong> - Event fired when the element starts being 
                resized</li>
            <li><strong>OnClientResizing</strong> - Event fired as the element is being resized</li>
            <li><strong>OnClientResize</strong> - Event fired when the element has been resized</li>
        </ul>
        <p>
            [/TBD]</p>
        <ul>
            <li><strong>HandleOffsetX/HandleOffsetY</strong> - Offsets to apply to the location 
                of the resize handle</li>
        </ul>
    </asp:Panel>

    <ajaxToolkit:CollapsiblePanelExtender ID="cpeDescription" runat="Server" 
        TargetControlID="Description_ContentPanel"
        ExpandControlID="Description_HeaderPanel"
        CollapseControlID="Description_HeaderPanel"
        Collapsed="False"
        ImageControlID="Description_ToggleImage" /> 
    <ajaxToolkit:CollapsiblePanelExtender ID="cpeProperties" runat="Server" 
        TargetControlID="Properties_ContentPanel"
        ExpandControlID="Properties_HeaderPanel"
        CollapseControlID="Properties_HeaderPanel"
        Collapsed="True"
        ImageControlID="Properties_ToggleImage" />
</asp:Content>
<asp:Content ID="Content1" runat="server" contentplaceholderid="ContentTitle">
    ResizableWebPart Demonstration
</asp:Content>
